<template>
  <div>
    <!-- Table -->
    <el-dialog title="关联分类" :visible.sync="dialogTableVisible">
      <div style="display: block">
        <category-tree-cascader @category-change="addCategory"
                                :categoryIdArray="categoryPathArray"
                                :showAllLevels="showAllLevels"
                                ref="categoryTreeRef"></category-tree-cascader>

      </div>

      <el-table :data="categoryBrandRelationArray" @row-click="getFullCategoryPath">
        <el-table-column property="brandName" label="品牌名" width="150"></el-table-column>
        <el-table-column property="catelogName" label="分类名" width="200"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="slot">
            <el-button @click="removeRelation(slot.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>

<script>
import categoryTreeCascader from '../common/categoryTreeCascader'
import categoryBrandRelationApi from '@/api/product/CategoryBrandRelationApi.js'
import categoryApi from '../../../api/categoryApi'

export default {
  name: 'association-classification',
  components: {
    categoryTreeCascader
  },
  data () {
    return {
      categoryBrandRelationArray: [],
      dialogTableVisible: false,
      brandId: 0,
      brandName: '',
      categoryPathArray: [],
      showAllLevels:true
    }
  },
  methods: {
    async addCategory (categoryPathArray) {
      console.log(categoryPathArray)
      let threeLevelCategoryId = categoryPathArray[categoryPathArray.length - 1]

      let p = await categoryBrandRelationApi.save(this.brandId, this.brandName, threeLevelCategoryId)

      console.log(p.data)

      this.getCategoryBrandRelationByBrandId()

    },
    getCategoryBrandRelationByBrandId (brandId, name) {
      if (brandId) {

        this.brandId = brandId
      }
      if (name) {

        this.brandName = name
      }
      categoryBrandRelationApi.getCategoryBrandRelationByBrandId(this.brandId).then(({data}) => {
        console.log(data.page)
        this.categoryBrandRelationArray = data.page.list
      })
    },
    async removeRelation (id) {
      let p = await categoryBrandRelationApi.deleteBatch(id)

      this.$message({
        message: '删除成功',
        type: 'success'
      })

      this.getCategoryBrandRelationByBrandId()
    },
    async getFullCategoryPath (row, column, event) {
      console.log('行被点击了', row, column, event)

      this.$nextTick(()=>{
        this.$refs.categoryTreeRef.showAllLevelsLocal = true;
      })

      let p = await categoryApi.findCategoryIdPath(row.catelogId)
      this.categoryPathArray = p.data.filter(path => {
        return path != 0
      }).reverse()
    }

  },
  mounted () {

  }
}
</script>

<style scoped>

</style>
